<template>
  <div>
    <el-carousel height="506px">
      <el-carousel-item>
        <img src="../assets/wuliu1.jpg" alt="" style="width: 100%; ">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/wuliu2.jpg" alt="" style="width: 100%; ">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/wuliu3.jpg" alt="" style="width: 100%; ">
      </el-carousel-item>
    </el-carousel>
    <div style="margin: 20px auto;font-size: 30px;text-align: center">服务项目</div>
    <el-divider content-position="center">Business Introduction</el-divider>
    <el-row :gutter="30" style="margin: 30px auto 0;width: 80%">
      <el-col :span="6">
        <el-card class="box-card">
          <i class="tubiao icon iconfont icon-yunshuzhongwuliu"></i>
          <el-divider content-position="center">运输服务</el-divider>
          为你提供城市之间的便捷运输，满足您的多样性需求，为你提供安全便捷的服务。
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <i class="el-icon-s-home tubiao"></i>
          <el-divider content-position="center">仓库管理</el-divider>
          为你管理仓库和仓库中存储物资，提供供应链管理体系的规划以及设计。
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <i class="el-icon-box tubiao"></i>
          <el-divider content-position="center">城市配送</el-divider>
          为你提供到门的贴心服务，为客户提供足不出户的物流服务。<br/> &nbsp;
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <i class="el-icon-map-location tubiao"></i>
          <el-divider content-position="center">物流跟踪</el-divider>
          为你提供实时的物流信息，物流信息的每一个细节都应该被客户知晓
        </el-card>
      </el-col>
    </el-row>


    <div style="margin: 20px auto;font-size: 30px;text-align: center">销售活动</div>
    <el-divider content-position="center">sales</el-divider>
    <el-row :gutter="30" style="margin: 30px auto 0;width: 80%">
      <el-col :span="6" v-for="ad in ads.slice(0,4)">
        <el-card class="box-card1"><img :src="ad.adPicture" class="adimg" alt="没得图">
          <hr>
          <h2 style="text-align: center">{{ad.adTitle}}</h2>
        </el-card>
      </el-col>

    </el-row>


    <div style="margin: 20px auto;font-size: 30px;text-align: center">公司公告</div>
    <el-divider content-position="center">notices</el-divider>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in notices" :key="item.noticeId" @click.native="showNotice(item)">
        <h3 class="news">{{ item.noticeTitle }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-drawer
        title="公告详情"
        :visible.sync="drawer"
        direction="ttb"
        size="70%">
      <div style="margin: 0 auto;width:50%;font-family:serif">
        <h1 style="text-align: center">{{ notice.noticeTitle }}</h1>
        <el-divider content-position="center">发布时间：{{ notice.noticeTime }}</el-divider>
        <p v-html="notice.noticeText" style="text-indent: 2em;margin-top: 30px;font-size: 18px">
        </p>
      </div>

    </el-drawer>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "OfficialWeb",
  data() {
    return {
      drawer: false,
      notices: [],
      notice: {},
      ads: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/notice/getAll").then(res => {
        this.notices = res.data.records
      })
      request.get("/ad/getAll").then(res => {
        this.ads = res.data.records
      })
    },
    showNotice(notice) {
      this.notice = notice
      this.drawer = true
    }
  }
}
</script>

<style scoped>
.box-card {
  text-align: center;
}

.tubiao {
  font-size: 256px;
  color: #409EFF
}

.news {
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 64px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.adimg {
  width: 256px;
  height: 256px;
}

</style>